<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天生鲜——首页</title>
    <script src="/static/buyer/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/buyer/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/buyer/css/footer.css">
    <link rel="stylesheet" href="/static/buyer/css/list.css">
    <link rel="stylesheet" href="/static/buyer/css/search.css">
    <script src="/static/buyer/js/bootstrap.js"></script>
    <script src="/static/vue/vue.min.js"></script>
    <script src="/static/vue/vue-resource.js"></script>

</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid container">
        <!-- Brand and to-only">Toggle navigation</span>
            <span class="icon-bggle get grouped for better mobile display -->
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">欢迎来到天天生鲜</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="bootstrap_login.html">登录</a></li>
                <li><a href="bootstrap_register.html">注册</a></li>
                <li><a href="user-center-info.html">用户中心</a></li>
                <li><a href="bootstrap_cart.html">我的购物车</a></li>
                <li><a href="myorders.html">我的订单</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <!--2.搜索框开始-->
    <div class="search col-sm-12">
        <div class="row">
            <!--左边图片和文字-->
            <div class="col-lg-5">
                <img src="/static/buyer/images/logo.png" alt="..." class="img-rounded">
                <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;所有商品</span>
            </div>
            <!--右边表单-->
            <div class="col-lg-6 col-lg-offset-1 search_bar">
                <form action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索商品">
                        <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit">搜索</button>
                </span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div>
        <div class="col-xs-12 col-sm-2">
            <ul class="list-group">
                <li class="list-group-item active">全部商品分类</li>
            </ul>

        </div>
        <div class="col-xs-12 col-sm-10">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">首页</a></li>
                <li role="presentation"><a href="#">手机生鲜</a></li>
                <li role="presentation"><a href="#">抽奖</a></li>
            </ul>
        </div>
    </div>
    <div>
        <p class="col-xs-12">全部分类 > 新鲜水果</p>
    </div>
    <div>
        <div class="col-xs-12 col-sm-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title text-center newheight">新品推荐</h3>
                </div>
                <div class="panel-body">
                    <div class="col-xs-12 col-sm-12">
                        <a href="detail.html" class="thumbnail">
                            <img src="/static/buyer/images/goods/goods001.jpg" class="img-responsive">
                            <p class="text-center">进口柠檬</p>
                            <p class="text-center">￥3.90</p>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                        <a href="#" class="thumbnail">
                            <img src="/static/buyer/images/goods/goods002.jpg" class="img-responsive">
                            <p class="text-center">玫瑰香葡萄</p>
                            <p class="text-center">￥16.80</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {% verbatim %}

        <div id="content">
        <div class="col-xs-12 col-sm-10">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <ul class="nav nav-pills">
                        <li><a href="">默认</a></li>
                        <li><a href="">价格</a></li>
                        <li><a href="">人气</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                        <div class="col-xs-12 col-sm-3" v-for="one in goods_list">
                            <a href="detail.html" class="thumbnail">
                                <img v-bind:src="'/static/buyer/'+one.g_picutre" class="img-responsive">

                            </a>
                            <p class="text-center">{{ one.g_name }}</p>

                            <p class="text-center myps"><span>￥{{ one.g_price }}</span><span>{{ one.g_price }}/500g</span><span><img
                                    src="/static/buyer/images/carts.png"/></span></p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-8 col-sm-offset-4">
                <ul class="pagination col-xs-12 col-sm-8 col-sm-offset-2">
                    <li>
                        <a href="#" aria-label="Previous" v-on:click="getprev()">
                            <span aria-hidden="true">上一页</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next" v-on:click="getnext()">
                            <span aria-hidden="true">下一页</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        </div>

        {% endverbatim %}

    </div>
</div>
<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>

<script>
    new Vue({
        el:"#content",
        data:{
            goods_list:[
                {"g_name":"进口柠檬","g_price":"3.90","g_picutre":"images/goods/goods001.jpg"},
            {#    {"g_name":"玫瑰香葡萄","g_price":"16.80","g_picutre":"images/goods/goods002.jpg"},#}
            {#    {"g_name":"大兴大棚草莓","g_price":"25.00","g_picutre":"images/goods/goods003.jpg"},#}
            {#    {"g_name":"吐鲁番梨光杏","g_price":"5.50","g_picutre":"images/goods/goods004.jpg"},#}
            {#    {"g_name":"黄肉桃","g_price":"10.00","g_picutre":"images/goods/goods005.jpg"},#}
            {#    {"g_name":"进口西梅","g_price":'28.80',"g_picutre":"images/goods/goods006.jpg"},#}
            {#    {"g_nasme":"香梨","g_price":'6.45',"g_picutre":"images/goods/goods007.jpg"},#}
            {#    {"g_name":"s栗子","g_price":'9.50',"g_picutre":"images/goods/goods008.jpg"},#}
            {#    {"g_name":"海南香蕉","g_price":'3.30',"g_picutre":"images/goods/goods009.jpg"},#}
            {#    {"g_name":"青苹果","g_price":'5.00',"g_picutre":"images/goods/goods010.jpg"},#}
            {#    {"g_name":"山霉","g_price":'28.80',"g_picutre":"images/goods/goods011.jpg"},#}
            {#    {"g_name":"奇异果","g_price":'25.80',"g_picutre":"images/goods/goods012.jpg"},#}
            {#    {"g_name":"蜜桔","g_price":'4.80',"g_picutre":"images/goods/goods013.jpg"},#}
            {#    {"g_name":"脐橙","g_price":'3.50',"g_picutre":"images/goods/goods014.jpg"},#}
            {#    {"g_name":"进口车厘子","g_price":'45.00',"g_picutre":"images/goods/goods017.jpg"},#}
            ]
        },
        created:function () {
            // 初始化 执行 请求数据
            var url = "http://127.0.0.1:8000/api/morelist/?type_id=1";
            this.$http.get(url);

            // 完成数据绑定
        },
        methods:{
            getdata:function(url){
                this.$http.get(url).then(  // 请求之后执行then
                    function (data) {
                        // 赋值 动态数据绑定的过程
                        this.goods_list = data.data.results;
                        this.next_url = data.data.next;
                        this.prev_url = data.data.previous;
                        }, // 类似 ajax 中的 success
                        function (error) {
                            console.log(error)
                    } // 类似于ajax 中的 error
                )
                },
                getprev:function () {
                    // 发送请求 获取到上一页的url
                    if (this.prev_url){
                        this.getdata(this.prev_url)
                    }
            },
            getnext:function () {
                {#console.log("next")#}
                // 获取到下一页的url
                {#console.log(this.next_url)#}
                // 发送请求
                this.getdata(this.next_url)
            }
        }
     })

</script>


{#<script>#}
{#    new Vue({#}
{#        el:"#content",#}
{#        data:{#}
{#            goods_list:[#}
                {#{"g_name":"进口柠檬","g_price":"3.90","g_picutre":"images/goods/goods001.jpg"},#}
            {#    {"g_name":"玫瑰香葡萄","g_price":"16.80","g_picutre":"images/goods/goods002.jpg"},#}
            {#    {"g_name":"大兴大棚草莓","g_price":"25.00","g_picutre":"images/goods/goods003.jpg"},#}
            {#    {"g_name":"吐鲁番梨光杏","g_price":"5.50","g_picutre":"images/goods/goods004.jpg"},#}
            {#    {"g_name":"黄肉桃","g_price":"10.00","g_picutre":"images/goods/goods005.jpg"},#}
            {#    {"g_name":"进口西梅","g_price":'28.80',"g_picutre":"images/goods/goods006.jpg"},#}
            {#    {"g_nasme":"香梨","g_price":'6.45',"g_picutre":"images/goods/goods007.jpg"},#}
            {#    {"g_name":"s栗子","g_price":'9.50',"g_picutre":"images/goods/goods008.jpg"},#}
            {#    {"g_name":"海南香蕉","g_price":'3.30',"g_picutre":"images/goods/goods009.jpg"},#}
            {#    {"g_name":"青苹果","g_price":'5.00',"g_picutre":"images/goods/goods010.jpg"},#}
            {#    {"g_name":"山霉","g_price":'28.80',"g_picutre":"images/goods/goods011.jpg"},#}
            {#    {"g_name":"奇异果","g_price":'25.80',"g_picutre":"images/goods/goods012.jpg"},#}
            {#    {"g_name":"蜜桔","g_price":'4.80',"g_picutre":"images/goods/goods013.jpg"},#}
            {#    {"g_name":"脐橙","g_price":'3.50',"g_picutre":"images/goods/goods014.jpg"},#}
            {#    {"g_name":"进口车厘子","g_price":'45.00',"g_picutre":"images/goods/goods017.jpg"},#}
{#            ]#}
{#        },#}
{#        created:function () {#}
{#            // 初始化 执行 请求数据#}
{#            var url = "http://127.0.0.1:8000/list_login1/";#}
{#            this.$http.get(url).then(  // 请求之后执行then#}
{#                function (data) {#}
{#                    console.log(data.data.data);#}
{#                    // 赋值 动态数据绑定的过程#}
{#                    this.goods_list = data.data.data;#}
{#                }, // 类似ajax中的success#}
{#                function (error) {#}
{#                    console.log(error)#}
{#                }  // 类似ajax中的serror#}
{#            )#}
{#            // 完成数据绑定#}
{#        }#}
{#     })#}
{##}
{#</script>#}

{#<script>#}
{#    $.ajax({#}
{#        url:"/list_login/",#}
{#        type:"GET",#}
{#        data:"",#}
{#        success:function (data) {#}
{#            console.log(data);#}
{#            new Vue({#}
{#                el:"#content",#}
{#                data:{#}
{#                    good_list:data.data#}
{#                }#}
{#            })#}
{#        },#}
{#        error:function (error) {#}
{#            console.log(error)#}
{#        }#}
{##}
{#    })#}
{#</script>#}


</body>
</html>